import React from 'react';
import ReactDOM from 'react-dom/client';

/* 
  要求：
    加减按钮，绑定同一个处理函数

  附加要求：
    最大值和最小值边界约束
*/

class App extends React.Component {
  state = {
    count: 1,
  };

  // 加减按钮，绑定同一个处理函数
  handlerCount = (num) => {
    // 先获取到原始 count
    const { count } = this.state;
    // 临时相加，React 状态不可变
    const temp = count + num;
    // 最小值判断
    if (temp < 1) return;
    // 最大值判断
    if (temp > 10) return;
    // 更新状态
    this.setState({
      count: temp,
    });
  };

  render() {
    return (
      <div>
        <p>当前数值为：{this.state.count}</p>
        <hr />
        <button onClick={() => this.handlerCount(-1)}>-</button>
        <span>{this.state.count}</span>
        <button onClick={() => this.handlerCount(1)}>+</button>
      </div>
    );
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
